<template>
	<view class="index_box">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="#999999" indicator-active-color="#FFCD00">
			<swiper-item v-for="(item ,index ) in bannerArr" v-if="item">
				<view class="swiper-item uni-bg-red"><image :src="item"></image></view>
			</swiper-item>
		</swiper>
		<view class="attractions_box">
			<view class="block1">
				<view class="tit dis_fx fx_column"><view class="tag">{{product.productTypeName}}</view><text>{{product.productName}}</text></view>
				<view class="type">({{product.productSubtitle}})</view>
			</view>
			<view class="pt_block1">
				
				<view class="item" v-for="item in orders">
					<view class="dis_fx fx_between fx_column"><view class="date">出行日期：{{item.tripDate}}</view><view class="price">￥{{item.amount}}</view></view>
					<view class="dis_fx fx_between fx_column mt20">
						<view>
							<view class="info dis_fx">可拼：<view class="cur_text">{{product.maxPeople}}</view>人，再拼{{product.minPeople-item.adultQty}}人成团</view>
							<view class="info2">已拼：成人{{item.adultQty}}人、儿童{{item.childQty}}人</view>
						</view>
						<view class="btn" @click="toAssemble(item.tripDate,item.maxQty-item.adultQty)">参与拼团</view>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				productId:"",
				orders:[],
				product:null,
				bannerArr:[],
				productConfig:{},
			}
		},
		onLoad(options){
			this.productId=options.productId
			this.getSpecList (options.productId)
			this.getDatas()
		},
		methods: {
			//拼团
			toAssemble(tripDate,maxPeople){
				var that=this;
				let dailyprice=0;
				let childrenPrice=0;
				let spec=that.productConfig.spec;
				let productSingleRoomDifference  =0;
				
				console.log(spec);
				for( var i in spec){
					let spe=spec[i]
					if(spe.date==tripDate){
						if(spe.productPrice){
							dailyprice=spe.productPrice
						}
						if(spe.childrenPrice){
							childrenPrice=spe.childrenPrice
						}
						if(spe.productSingleRoomDifference){
							productSingleRoomDifference =spe.productSingleRoomDifference;
						}
					}
				}
				let url='/pages/order/orderConfirm/orderConfirm?productId='+that.productId+"&price="+that.dailyprice+"&outDate="+tripDate+"&childrenPrice="+that.childrenPrice+"&roomPriceDifference="+that.productSingleRoomDifference+"&insurancePrice="+that.productConfig.insurancePrice+"&maxPeople="+maxPeople
				
				uni.navigateTo({url: url})
			},
			//加载规格数据
			getDatas(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that = this
				util.fetchPost('/api/product/getProductConfig',{productId:that.productId},function(res){
					console.log(res)
					that.productConfig=res.data
					uni.hideLoading();
				},function(){},false)
			},
			toNewPage(url){
				uni.navigateTo({
					url
				})
			},
			getSpecList (id) {
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var _self = this
				util.fetchPost('/api/product/getPackageOrders',{productId:id},function(res){
					console.log(res)
					_self.product=res.data
					if(_self.product.productMasterDiagram) {
						_self.bannerArr = _self.product.productMasterDiagram.split(",")
					}
					let orders=res.data.orders
					if(orders.length>0){
						for(let i in orders){
							orders[i].tripDate=util.formatDate(new Date(orders[i].tripDate),"yyyy-MM-dd")
						}
					_self.orders=orders;
					}
					uni.hideLoading();
				},function(){},false)				
			}	
			
		}
		
	}
</script>

<style>
	.index_box swiper,.index_box swiper image{
		width: 100%;
		height: 354upx;
	}
	.attractions_box{
		padding: 0 24upx 200upx;
	}
	.attractions_box .block1 .tit .tag{
		background: #FC5C1D;
		color: #fff;
		font-size: 23upx;
		width: 140upx;
		height: 46upx;
		line-height: 46upx;
		border-radius: 23upx;
		text-align: center;
	}
	.attractions_box .block1 .tit text{
		color: #333;
		font-size: 28upx;
		width: 533upx;
		margin-left: 21upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.attractions_box .block1 .type{
		font-size: 24upx;
		color: #999999;
		margin: 20upx 0 30upx;
	}
	.pt_block1 .item{
		border-bottom: 1px solid #EAEAEA;
		padding: 30upx 0;
	}
	.pt_block1 .item .date{
		font-size: 32upx;
		color: #333333;
		font-weight: 600;
	}
	.pt_block1 .item .price{
		font-size: 28upx;
		color: #FC5C1D;
	}
	.pt_block1 .item .info{
		color: #757575;
		font-size: 28upx;
	}
	.pt_block1 .item .info2{
		color: #C1C1C1;
		font-size: 28upx;
	}
	.pt_block1 .item .btn{
		background: #FFC800;
		width: 186upx;
		height: 70upx;
		line-height: 70upx;
		color: #fff;
		border-radius: 35upx;
		text-align: center;
	}
</style>
